<template>
    <div>
         <div class="accounthead">
                <img src="../../assets/asawhole.png" alt="">
                <span>任务列表</span>
                <div class="newBtn" @click="tobatchFeature">+ 批量创建</div>
                <div class="newBtn newBtnL" @click="tonewFeature">+ 单独创建</div>
        </div>

            <div class="searchbox">
                <el-input placeholder="请输入公司名称" v-model="searchcon" class="input-with-select searchInput" @keyup.native.enter="searchbtn">
                    <el-button slot="append" icon="el-icon-search" class="searchBtn" @click="searchbtn"></el-button>
                </el-input>
            </div>

        <!-- ckj 这是展示的表格   -->
        <div class="table">
             <el-table
                :data="tableData"
                stripe
                v-loading="loading"
                @row-click="toDetails"
                style="width: 100%">
                <el-table-column
                align="center"
                prop="id"
                label="ID"
                width="160">
                </el-table-column>
                <el-table-column
                prop="companyName"
                label="公司名称"
                width="380">
            </el-table-column>
            <el-table-column
                prop="module.name"
                label="搜索模块"
                width="380">
            </el-table-column>
            <el-table-column
                prop="insertTime"
                label="创建时间"
                width="380">
            </el-table-column>
            <el-table-column
                label="任务状态"
                >
                  <template slot-scope="scope">
                        {{scope.row.state | rowstate}}
                    </template>
            </el-table-column>
            </el-table>

        </div>

        
        <div class="pagebox">
          
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total= pagetotal>
                </el-pagination>
                <!-- <div class="pagetotalbox"> 共{{pagetotal}}条</div> -->
            </div>
        </div>
        

    </div>

</template>

<script>
import {getSearchList} from '@/api'
export default {
    data () {
        return {
            searchcon: '',
             tableData: [],
             pagenum: 1,
             pagetotal: 1,
             currentPage3: 5,
             loading: true,
             fullscreenLoading: true
        }
    },
    // created () {
    //     setInterval(()=>{
    //         this.initSearchList()
    //     },5000)
    // },
    mounted () {
        this.initSearchList ()
        setInterval(()=>{
            this.initSearchList()
        },60000)
    },
    // ckj 任务的6种状态,默认1为已提交,等待爬取 2为爬取中  3为已爬取,正在处理结果  4为已完成  0为批量创建的任务提交失败
    filters: {
        rowstate(state) {
            if(state === 1 ) {
                return '已提交,等待爬取'
            } else if(state === 2 ) {
                return '爬取中'
            } else if(state === 3) {
                return '已爬取,正在处理结果'
            } else if(state === 4) {
                return '已完成'
            }else if(state === 5) {
                return '已完成'
            }   else {
                return '批量创建的任务提交失败'
            }
        }  
    },
    methods: {
         handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pagenum = val
            // console.log(this.pagenum)
            this.loading =false
            this.initSearchList ()
        },
        // ckj 跳转到新建任务
        tonewFeature() {
            this.$router.push({path: '/newFeature', params:{toname: 'newFeature'} })
        },
        // ckj 跳转到批量创建任务
        tobatchFeature() {
            this.$router.push({path: '/newFiveFeature', params:{toname: 'newFiveFeature'} })
        },
        // d点击按钮跳转页面
        // topagenumbtn() {
        //     if(this.pagenum>=this.pagetotal) {
        //         return false;
        //     }
        //     this.initSearchList ()
        // },
        // nextpage() {
        //     if(this.pagenum>=this.pagetotal) {
        //         return false;
        //     }
        //     this.pagenum = this.pagenum + 1
        //     this.initSearchList ()
        // },
       
        initSearchList (){
            // ckj 用pageNum,pageSize获取任务列表及模糊搜索
            let obj = {
                pageNum: this.pagenum,
                pageSize: 10,
                companyName: this.searchcon,
                pagenum: this.pagenum
            }
            getSearchList(obj)
            .then(res => {
             if(res.statusCode ===200) {
                //  console.log(res)
                 this.tableData = res.data.list
                 this.pagetotal = res.data.total
                 this.loading = false
             } else if(res.statusCode ===201) {
                 this.tableData= []
                  this.loading = false
             } else {
                //  this.$message.error('获取列表失败');
                  this.loading = false
             }
            })
        },
        // 点击进入表格详情
        toDetails(row) {
            // console.log(row)
            this.$router.push({path: '/taskdetail', query: {id: row.id}})
        },
        // 点击搜索
        searchbtn() {
            this.pagenum = 1
            this.initSearchList()
        }
    }

}
</script>

<style lang="scss" scoped>
// .pagetotalbox {
//     text-align: center;
//     line-height: 1;
//     font-size: 14px;
//     color: #b5b1b1;
// }
.block {
    padding-top: 6px;
    // height: 70px;
    // background-color: #fff;
}
.el-table {
    cursor: pointer !important;
}

.el-table_3_column_11,.is-leaf {
    height: 40px;
}
.el-main {
    line-height: 1;
}
    .newBtn {
        display: inline;
        float: right;
        border:1px solid rgba(64,131,231,1);
        border-radius:8px;
        width: 109px;
        height: 30px;
        line-height: 30px;
        margin-right: 44px;
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
        color: #4083E7;
        cursor: pointer;
    }
    .newBtnL {
         margin-right: 10px;
    }
    .accounthead {
        position: relative;
        text-align: left;
        width: 100%;
        height: 70px;
        background-color: #fff;
        font-size: 22px;
        line-height: 86px;
        // border-bottom: 1px solid #ccc;
        img {
            margin-left: 20px;
        }
        span {
            position: absolute;
            bottom: -9px;
            left: 60px;
            // margin-bottom: 10px;
            // margin-left: 19px;
        }
    }
    .searchbox{
         height: 40px;
         background-color: #fff;
        position: relative;
        .searchInput {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin: 0 auto;
            width: 327px;
        }
        .searchBtn {
            background-color: #f5f7fa;
            // background-color: #BFBFBF;
        }
    }

    .pagebox {
        width: 100%;
        height: 48px;
        background-color: #fff;
    }
    .page {
        background: #fff;
        float: right;
        .pageInput {
            margin: 0 10px;
            height: 20px;
            width: 38px;
        } 
    }
    .angle {
        display: inline-block;
        transform:rotate(-90deg);
        cursor: pointer;
    }
</style>

